<template>
  <div class="view">
    <el-card shadow="hover">
      <template v-slot:header>
        <div class="title-wrapper">{{$t('dashboard.totalCourseClassification')}}</div>
      </template>
      <template>
        <div class="chart-wrapper">
          <div
            class="com-chart"
            ref="word_cloud_ref"
            :style="{width: '100%' , height:'100%'}"
          ></div>
        </div>
      </template>
    </el-card>
  </div>
</template>


<script>
import homeview from "@/api/homeview";
export default {
  name: "index",
  data() {
    return {
      chartInstance: null,
      allData: [],
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.word_cloud_ref);
      const initOption = {
        tooltip: {
          show: true,
          position: "top",
          formatter: (params) => {
            return `${params.marker}${params.name} : 数量 ${params.value}`;
          },
          textStyle: {
            fontSize: 14,
          },
        },
      };
      this.chartInstance.setOption(initOption);
    },
    // 获取服务器的数据
    getData() {
      homeview
        .getCourseTypeNum()
        .then((res) => {
          //数据处理
          let size = res.data.data.type.length;
          for (let i = 0; i < size; i++) {
            var temp = {};
            temp.name = res.data.data.type[i];
            temp.value = res.data.data.nums[i];
            this.allData.push(temp);
          }
          // console.log(this.allData);
          this.updateChart();
        })
        .catch((error) => {
          "error";
        });
    },
    // 更新图表
    updateChart() {
      const dataOption = {
        series: [
          {
            type: "wordCloud",
            // 网格大小，各项之间间距
            gridSize: 15,
            shape: "circle",
            // 字体大小范围
            sizeRange: [16, 50],
            // 文字旋转角度范围
            rotationRange: [-50, 50],
            // 旋转步值
            rotationStep: 40,
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            drawOutOfBound: true,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 255),
                      Math.round(Math.random() * 255),
                      Math.round(Math.random() * 255),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#2ac",
              },
            },
            geo: {
              zoom: 1,
              scaleLimit: {
                min: 0.5,
                max: 2,
              },
            },
            data: this.allData,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.view {
  flex: 1;
  width: 50%;
  box-sizing: border-box;
  &:first-child {
    padding: 0 10px 0 0;
  }
  &:last-child {
    padding: 0 0 0 10px;
  }
  .title-wrapper {
    display: flex;
    align-items: center;
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    font-weight: 500;
    padding: 0 0 0 20px;
  }
  .chart-wrapper {
    width: 100%;
    height: 500px;
    margin: -20% 0 -15% 0;
  }
}
</style>
